<template>
  <el-container>
    <!--  网页头部-->
<!--    <el-header>-->
<!--      <el-menu-->
<!--        :default-active="index"-->
<!--        class="el-menu-demo"-->
<!--        mode="horizontal"-->
<!--        @select="handleSelect"-->
<!--        background-color="#545c64"-->
<!--        text-color="#fff"-->
<!--        active-text-color="#ffd04b">-->
<!--        <el-menu-item index="1">首页</el-menu-item>-->
<!--        <el-submenu index="2">-->
<!--          <template slot="title">我的工作台</template>-->
<!--          <el-menu-item index="2-1">选项1</el-menu-item>-->
<!--          <el-menu-item index="2-2">选项2</el-menu-item>-->
<!--          <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--          <el-submenu index="2-4">-->
<!--            <template slot="title">选项4</template>-->
<!--            <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--            <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--            <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--          </el-submenu>-->
<!--        </el-submenu>-->
<!--        <el-menu-item index="3">消息中心</el-menu-item>-->
<!--        <el-menu-item index="4">合作</el-menu-item>-->
<!--        <el-menu-item index="5">关于我们</el-menu-item>-->
<!--        <el-submenu index="6" class="head">-->
<!--          <template slot="title">-->
<!--            <el-avatar :size="60" src="https://empty" @error="errorHandler">-->
<!--              <img src="static/images/swapbook.jpg"/>-->
<!--            </el-avatar>-->
<!--          </template>-->
<!--          <el-menu-item index="6-1">个人主页</el-menu-item>-->
<!--          <el-menu-item index="6-2">设置</el-menu-item>-->
<!--          <el-menu-item index="6-3">帮助</el-menu-item>-->
<!--          <el-menu-item index="6-4">退出</el-menu-item>-->
<!--        </el-submenu>-->

<!--      </el-menu>-->
<!--    </el-header>-->
    <el-header style="height: 45px">
      <ul>
        <li>首页</li>
        <li>我的儿童</li>
        <li>订单</li>
      </ul>
      <div class="parentsphoto"><img src="../../../static/images/7.png"></div>
    </el-header>
    <!--  网页主体-->
    <div>
      <!--  轮播图-->
      <div class="block">
        <el-carousel height="250px">
          <el-carousel-item v-for="(carouselmap,index) in news.carouselmaps" :key="index">
            <img :src="getImgUrl(carouselmap.cmimg)" >
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="height: 410px;">
      <h3 style="padding:0 0 5px 20px;"><span style="padding-right: 455px">热门书籍</span><span>图书资讯</span></h3>
      <bookranklist class="renklist"></bookranklist>
      <div class="advert"></div>
      </div>
      <div>
        <h2 style="padding:0 0 0 20px; width: 1160px; margin-bottom: -25px;"><span>精品图书</span></h2>
        <bookskind></bookskind>
      </div>
    </div>
    <el-footer>脚本</el-footer>
  </el-container>
</template>
<script>
import api from "../../../axios/api";
import Bookranklist from "../public/bookranklist";
import bookskind from "./bookskind/bookskind";

export default {
  name: "index",
  components: {Bookranklist,bookskind},
  data(){
    return{
      news:"",
      //item:["./static/images/6.jpg", "./static/images/scrolls/1.jpg","./static/images/6.jpg", "./static/images/scrolls/1.jpg"]
    }
  },
  methods:{
    getImgUrl: function (imgsrc) {
      return this.$store.state.host + "/upload/images/carouselmap/"+ imgsrc;
    },
    setDataFromAxios: function (currPage) {
      //this.initpic();
      //console.log(prno)
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios(this.$store.state.host + "/newsController/selectNewsWithCarouselmap/001", null, "post")
        .then(dto => {
          console.log(dto);
          this.news = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

    },

  },
  created() {
    this.setDataFromAxios();
  }
}
</script>
<style scoped>
.el-container{width:1000px;margin: 0 auto;}
.el-header{background-color: #d4e0e0; height: 45px}
.el-header > ul{ width:800px; list-style-type:none; color: #333333; font-size:15px; font-weight:600; font-family:宋体; }
.el-header > ul > li{float:left; list-style:none; padding:0px 100px 0px 0px;}
.el-header > .parentsphoto{float: right;}
.el-header > .parentsphoto > img{width: 40px; height: 40px; border-radius:50%;margin: -10px 0 0 0}

.head{float: right;}
.head img{}
.el-main{padding-top: 0px; }
.el-carousel__item h3 {font-size: 14px;opacity: 0.75;line-height: 150px;margin: 0;}
.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}
.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
.renklist{float: left; width: 530px;}
.advert{float: right;width: 460px;height: 350px;margin-top: -10px;border-radius: 5px;border: 1px solid #eee;}
</style>
